<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="icon" href="img/favicon.ico">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/vendor.min.css">
    <link rel="stylesheet" href="css/plugins.min.css">
    <link rel="stylesheet" href="css/style.min.css">
    <style>
        .pwde-table {
            width: 100%;
            text-align: center;
            border: solid 1px black;
        }
        .pwde-tr {
            background-color: #006fb7;
        }
        .pwde-table tr, td, th {
            height: 40px;
            border: solid 1px black;
        }
        html{
            height: 100%;
            overflow-y: hidden;
        }
        body{
            height: 100%;
            overflow-y: auto;
        }
        .tupian{
            display: flex;
            align-items: center;
        }
        .jj{
            width: 12px;
            height: 12px;
        }
        .question{
            display: flex;
            justify-content: space-between;
        }
        .answer{
            margin-top: 15px;
        }
        .two{
            padding-top: 6px;
        }
    </style>
</head>
<body>

<div class="container" style="margin-top: 20px;">
    <div class="row">
        <div class="col-lg-6">
            <div class="product-thumb-with-content row">
                <div class="col-12 order-lg-1 order-2 pt-10 pt-lg-0">
                    <div class="single-product-content">
                        <h2 class="title">常见问题</h2>
                    </div>
                </div>
                <div class="col-12 order-lg-2 order-1 pt-10 pt-lg-0">
                    <div class="swiper-container single-product-thumbs">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="product-tab-area" style="padding-bottom: 50px;margin-top: 20px;">
    <div class="container" id="content">
<!--        <div style="margin: 10px 0;padding: 10px;background-color: white">-->
<!--            <div class="question">-->
<!--                <div>-->
<!--                    <div>问题</div>-->
<!--                    <div class="two">四大发明分别是哪四个？</div>-->
<!--                </div>-->
<!--                <div class="tupian" onclick="yc(1)">-->
<!--                    <img class="jj jj1" src="img/index/jian.png">-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="answer da1">-->
<!--                <div>答案</div>-->
<!--                <div class="two">造纸术、指南针、火药、印刷术</div>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div style="margin: 10px 0;padding: 10px;background-color: #F1F1F1">-->
<!--            <div class="question">-->
<!--                <div>-->
<!--                    <div>问题</div>-->
<!--                    <div class="two">四大发明分别是哪四个？</div>-->
<!--                </div>-->
<!--                <div class="tupian">-->
<!--                    <img class="jj" src="img/index/jian.png">-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="answer">-->
<!--                <div>答案</div>-->
<!--                <div class="two">造纸术、指南针、火药、印刷术</div>-->
<!--            </div>-->
<!--        </div>-->
    </div>
</div>

<script src="js/vendor.min.js"></script>
<script src="js/plugins.min.js"></script>
<script src="js/main.min.js"></script>
<script src="layui/layui.js"></script>
<script src="js/token.js"></script>
<script src="js/config.js"></script>
<script src="js/jquery.i18n.min.js"></script>
<script src="js/multi_lang_config.js"></script>
<script>

    var layer = layui.layer;
    var form = layui.form;

    var moduleName = "subMain";
    var defaultLang = layui.data('langTab').langType;
    initLangConfig({
        defaultLang:defaultLang,
        filePath: "js/i18n/"+moduleName+"/",
        module:moduleName,
        base:"js/"
    })
    var i18np = null;
    function changeLang(lang) {
        defaultLang = lang;
        reloadI18n({
            defaultLang:lang,
            filePath: "js/i18n/"+moduleName+"/",
            module:moduleName,
        })
        i18np.loadProperties(moduleName);
        sjxwDataInit();
    }

    layui.config({base: 'js/'})
        // 继承treetable.js插件
        .extend({i18np: 'i18n'}).use([ 'i18np','jquery'], function () {
        i18np = layui.i18np;
        i18np.loadProperties(moduleName);
    });

    function yc(i) {
        var isShow = news[i].isShow;
        if (isShow == 1){
            $(".da"+i).hide();
            $(".jj"+i).attr("src","img/index/jia.png");
        }else{
            $(".da"+i).show();
            $(".jj"+i).attr("src","img/index/jian.png")
        }
        news[i].isShow = isShow==1 ? 0 : 1;
    }

    var news = [];
    function sjxwDataInit(){
        var s = "";
        if (defaultLang == "zh") {
            var x = 0;
            for (var i=0;i<news.length;i++){
                var background = "";
                if (x == 0){
                    background = "white";
                }else{
                    background = "#F1F1F1";
                }
                x = x==1?0:1;
                s = s + "<div style=\"margin: 10px 0;padding: 10px;background-color: "+background+"\">\n" +
                    "            <div class=\"question\">\n" +
                    "                <div>\n" +
                    "                    <div>问题</div>\n" +
                    "                    <div class=\"two\">"+news[i].questionZh+"</div>\n" +
                    "                </div>\n" +
                    "                <div class=\"tupian\" onclick=\"yc("+i+")\">\n" +
                    "                    <img class=\"jj jj"+i+"\" src=\"img/index/jian.png\">\n" +
                    "                </div>\n" +
                    "            </div>\n" +
                    "            <div class=\"answer da"+i+"\">\n" +
                    "                <div>答案</div>\n" +
                    "                <div class=\"two\">"+news[i].answerZh+"</div>\n" +
                    "            </div>\n" +
                    "        </div>";
            }
        } else if (defaultLang == "la") {
            var x = 0;
            for (var i=0;i<news.length;i++){
                var background = "";
                if (x == 0){
                    background = "white";
                }else{
                    background = "#F1F1F1";
                }
                x = x==1?0:1;
                s = s + "<div style=\"margin: 10px 0;padding: 10px;background-color: "+background+"\">\n" +
                    "            <div class=\"question\">\n" +
                    "                <div>\n" +
                    "                    <div>问题</div>\n" +
                    "                    <div class=\"two\">"+news[i].questionLao+"</div>\n" +
                    "                </div>\n" +
                    "                <div class=\"tupian\" onclick=\"yc("+i+")\">\n" +
                    "                    <img class=\"jj jj"+i+"\" src=\"img/index/jian.png\">\n" +
                    "                </div>\n" +
                    "            </div>\n" +
                    "            <div class=\"answer da"+i+"\">\n" +
                    "                <div>答案</div>\n" +
                    "                <div class=\"two\">"+news[i].answerLao+"</div>\n" +
                    "            </div>\n" +
                    "        </div>";
            }
        } else if (defaultLang == "en") {
            var x = 0;
            for (var i=0;i<news.length;i++){
                var background = "";
                if (x == 0){
                    background = "white";
                }else{
                    background = "#F1F1F1";
                }
                x = x==1?0:1;
                s = s + "<div style=\"margin: 10px 0;padding: 10px;background-color: "+background+"\">\n" +
                    "            <div class=\"question\">\n" +
                    "                <div>\n" +
                    "                    <div>问题</div>\n" +
                    "                    <div class=\"two\">"+news[i].questionEn+"</div>\n" +
                    "                </div>\n" +
                    "                <div class=\"tupian\" onclick=\"yc("+i+")\">\n" +
                    "                    <img class=\"jj jj"+i+"\" src=\"img/index/jian.png\">\n" +
                    "                </div>\n" +
                    "            </div>\n" +
                    "            <div class=\"answer da"+i+"\">\n" +
                    "                <div>答案</div>\n" +
                    "                <div class=\"two\">"+news[i].answerEn+"</div>\n" +
                    "            </div>\n" +
                    "        </div>";
            }
        }
        $("#content").html(s);
    }

    $(function (){
        search();
    })
    function search() {
        $.ajax({
            url: HOST+"webapi/commonProblem/getAllCommonProblemByType?type=1",
            type: "GET",
            success: function (res) {
                if (res.code == 200){
                    news = res.data;
                    sjxwDataInit();
                }
            }
        })
    }

</script>
</body>
</html>